<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="myClub m1280">My club</div>
		<div class="boxItem m1280 f f-j-b">
			<div class="left f f-d-c f-a-c f-j-c">
				<img src="/src/assets/tou.png" alt="" />
				<div class="ctrue">Edit picture</div>
				<div class="title">Analytical Squad</div>
				<div class="tabs">
					<div :class="{ act: ind == 1 }" @click="ind = 1" class="tabsTop hand">Club</div>
					<div :class="{ act: ind == 2 }" @click="tow()" class="tabsTop hand">Content</div>
				</div>
			</div>
			<div v-show="ind == 1">
				<div class="right">
					<div class="topName f f-a-c f-j-b">
						<div class="nameLef">
							<div class="tit">Club name</div>
							<input type="text" v-model="form.name" class="inp" placeholder="Analytical Squad" name="" id="" />
						</div>
						<div class="nameRig">
							<div style="margin-bottom: 12px" class="tit">Tags</div>
							<el-select v-model="form.tags" multiple placeholder="Select" size="large" style="width: 450px">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</div>
					</div>
					<div class="price">Price</div>
					<div class="topName f f-a-c f-j-b">
						<div class="nameLef">
							<div class="tit">For subscription</div>
							<div class="inpBox f f-a-c f-j-b">
								<div style="width: 80%" class="f f-a-c">
									<div class="lefDao">$</div>
									<input type="text" v-model="form.subscription" class="pricInp" name="" id="" />
								</div>
								<div class="money">/Monthly</div>
							</div>
						</div>
						<div class="nameLef">
							<div class="tit">For subscription</div>
							<div class="inpBox f f-a-c f-j-b">
								<div style="width: 80%" class="f f-a-c">
									<div class="lefDao">$</div>
									<input type="text" v-model="form.subscription" class="pricInp" name="" id="" />
								</div>
								<div @click="shows = true" class="money hand">
									/Monthly
									<div v-show="shows" class="monryBox">
										<div @click.stop="qiehuan()" class="month hand">3 months</div>
										<div @click.stop="qiehuan()" class="month hand">6 months</div>
										<div @click.stop="qiehuan()" class="month hand">12 months</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 下面的文本域 -->
					<div class="textInp">
						<div class="titText">Introduction</div>
						<a-textarea class="textarea" showCount :maxlength="150" v-model:value="form.introduction" placeholder="Please enter..." :auto-size="{ minRows: 4, maxRows: 10 }" />
					</div>
					<!-- 下面的文本域 -->
					<div class="textInp">
						<div class="titText">Description</div>
						<a-textarea class="textarea" showCount :maxlength="1000" v-model:value="form.description" placeholder="Please enter..." :auto-size="{ minRows: 8, maxRows: 10 }" />
					</div>
					<div class="save f f-a-c">
						<div class="saves hand">Save</div>
					</div>
				</div>
			</div>
			<div v-show="ind == 2 && art == 1" class="right2">
				<div class="topFilter f f-a-c f-j-b">
					<div class="inpFilter f f-a-c">
						<div class="inpBoxs f f-a-c f-j-b">
							<input type="text" class="digtal" placeholder="Digital marketing" v-model="marking" name="" id="" />
							<img src="/src/assets/user/sousuo2.png" class="sousuo hand" alt="" />
						</div>
						<div @click="filterVisible = true" class="filters hand f f-a-c f-j-c">Filter <img src="/src/assets/user/list.png" alt="" /></div>
					</div>
					<div @click="addAct" class="add hand">+ Write an article</div>
				</div>
				<!-- thisMonth -->
				<div class="thisMonth">
					<div class="top">This month</div>
					<div v-for="(item, index) in 5" :key="index" class="thisItem f">
						<div class="title">
							<div class="titName">Title</div>
							<div class="howAl f f-a-c">How AI is Evolving</div>
						</div>
						<div class="tags">
							<div class="titName">Tags</div>
							<div class="tagCoun f f-a-c f-w-w f-j-c">
								<div class="tagItem">Software development</div>
								<div class="tagItem">Data</div>
								<div class="tagItem">Code review</div>
							</div>
						</div>
						<div class="price">
							<div class="titName f f-a-c f-j-c">Price <img src="/src/assets/user/wen.png" class="wenxImg" alt="" /></div>
							<div class="Mb">$15/Mo <br /><span>(offer:$96/annually) </span></div>
						</div>
						<div class="price">
							<div class="titName f f-a-c f-j-c">Income <img src="/src/assets/user/wen.png" class="wenxImg" alt="" /></div>
							<div class="Mb">$50K</div>
						</div>
						<div class="pinned">
							<div :class="{ active: index == inds }" class="titName">
								<img v-if="index == 1" src="/src/assets/come/13.png" alt="" />
								<img v-else src="/src/assets/come/12.png" alt="" />
								Pinned
							</div>
							<div class="btnPin f f-a-c">
								<div class="det hand">Delete</div>
								<div class="emit hand">Edit</div>
							</div>
						</div>
					</div>
				</div>
				<!--  -->
			</div>
			<!-- 新增 -->
			<div v-show="ind == 2 && art == 2" class="right3">
				<div class="write">Write an article</div>
				<div class="nameLef">
					<div class="tit">Title</div>
					<input type="text" v-model="title" class="inp" placeholder="How AI is Evolving" name="" id="" />
				</div>
				<div class="nameLef">
					<div style="margin-bottom: 12px" class="tit">Tags</div>
					<el-select v-model="tags" multiple placeholder="Select" size="large" style="width: 100%">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="nameLef">
					<div class="tit">Article cover</div>
					<div>
						<el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card">
							<el-icon><Plus /></el-icon>
						</el-upload>
					</div>
					<div class="counts">Only JPG/PNG/GIF is supported, and the size cannot exceed 1 MB, The recommended size is 800X600.</div>
				</div>
				<div class="priceOne">
					<div class="priceName">Price</div>
					<div class="pricBox f f-a-c">
						<div style="margin-right: 40px" @click="showPrice = 1" class="leftPic hand f f-a-c">
							<img v-if="showPrice == 1" src="/src/assets/user/gou.png" alt="" />
							<img v-else src="/src/assets/user/weigou.png" alt="" />
							For free
						</div>
						<div @click="showPrice = 2" class="leftPic hand f f-a-c">
							<img v-if="showPrice == 2" src="/src/assets/user/gou.png" alt="" />
							<img v-else src="/src/assets/user/weigou.png" alt="" />
							One time
						</div>
						<div class="inpBox f f-a-c">
							<div class="daola">$</div>
							<input type="text" v-model="priceNum" placeholder="price" class="inpPrice" name="" id="" />
						</div>
					</div>
				</div>
				<!-- 下面的富文本 -->
				<div class="richText">
					<div class="topText">Content</div>
					<RichText ref="richText" :value="emailForm.msg" @updateValue="getMsg" />
				</div>
				<!-- btn -->
				<div class="botBtn f f-a-c">
					<div class="btn f f-a-c">
						<div class="lefBtn hand">Save</div>
						<div @click="priCount" class="rigBtn hand">Preview</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="filterVisible" title="" width="540px">
			<div class="filterTit">Filter</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Date</div>
				<el-date-picker v-model="formFilter.dataTime" type="date" placeholder="Pick a day" size="large" />
			</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Tags</div>
				<el-select v-model="formFilter.tags" size="large" multiple placeholder="Select" style="width: 100%">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Tags</div>
				<div class="priceNum f f-a-c f-j-b">
					<div class="pricMin f f-a-c f-j-b">
						<span class="name">MIN</span>
						<input type="text" v-model="formFilter.min" class="pricInp" ame="" id="" />
						<span class="daola">$</span>
					</div>
					<div>-</div>
					<div class="pricMin f f-a-c f-j-b">
						<span class="name">MAX</span>
						<input type="text" v-model="formFilter.max" class="pricInp" ame="" id="" />
						<span class="daola">$</span>
					</div>
				</div>
			</div>
			<div class="btnB f f-a-c f-j-b">
				<div @click="cler" class="clear hand">Clear all</div>
				<div class="apply hand">Apply</div>
			</div>
		</el-dialog>
		<el-dialog v-model="dialogVisible">
			<img w-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import RichText from "@/components/richText/index.vue";
	import { Plus } from "@element-plus/icons-vue";
	import { ref, onMounted, reactive } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";

	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let filterVisible = ref(false);
	let ind = ref(2);
	let fileList = ref([]);
	let formFilter = reactive({
		dataTime: "",
		tags: [],
		min: "",
		max: ""
	});
	let richText = ref(null);
	let art = ref(1);
	let inds = ref(1);
	let showPrice = ref(1);
	let marking = ref("");
	let priceNum = ref("");
	let title = ref("");
	let tags = ref([]);
	let shows = ref(false);
	const dialogImageUrl = ref("");
	const dialogVisible = ref(false);
	const emailForm = reactive({
		test_msg: ""
	});
	let form = reactive({
		name: "",
		tags: [],
		subscription: "",
		introduction: "",
		description: ""
	});
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		},
		{
			value: "Option5",
			label: "Option5"
		}
	];
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const cler = () => {
		console.log(formFilter.min);
		formFilter.min = "";
		formFilter.max = "";
		formFilter.tags = [];
		formFilter.dataTime = "";
		// formFilter = {
		// 	dataTime: "",
		// 	tags: [],
		// 	min: "",
		// 	max: ""
		// };
	};
	const priCount = () => {
		// richText.value.getContent();
		console.log(richText.value.content, "8888");
		router.push({
			path: "/KnowCreateCkubDetils"
		});
	};
	// 点击第二个导航
	const tow = () => {
		ind.value = 2;
		art.value = 1;
	};
	//点击添加
	const addAct = () => {
		ind.value = 2;
		art.value = 2;
	};
	const getMsg = val => {
		emailForm.msg = val;
		console.log(val, "151515151");
	};
	const qiehuan = item => {
		shows.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
